<template>
  <view>
    <!-- #ifdef MP-->
    <view
      class="cart_nav acea-row"
      :style="{ height: navH + 'rpx', background: backgroundColor }"
      :class="isBackgroundColor ? 'backgroundColor' : ''"
    >
      <view class="mp-header">
        <view class="sys-head" :style="{ height: sysHeight + 'px' }"></view>
        <!-- #ifdef MP-->
        <view
          v-if="isBack"
          id="home"
          class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back"
          :style="{ height: '80rpx', lineHeight: '80rpx', color: iconColor }"
          @tap="returns"
        >
        </view>
        <!-- <image
          v-if="isBack"
          class="return h5_back"
          src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/cashRegisterImg/return.png"
          mode="scaleToFill"
          @tap="returns"
        /> -->
        <!-- #endif -->
        <view
          class="nav_title"
          :style="{ height: '80rpx', lineHeight: '80rpx', color: iconColor }"
        >
          {{ navTitle }}
          <slot name="default"></slot>
        </view>
      </view>
      <!-- #ifdef H5 -->
      <view
        id="home"
        class="home acea-row row-center-wrapper iconfont icon-shouye4 h5_back"
        :style="{ top: homeTop + 'rpx', color: iconColor }"
        @tap="goToHome"
      >
      </view>
      <view
        class="right_select"
        :style="{ top: homeTop + 'rpx', color: iconColor }"
        @tap="showNav"
      >
        <text class="iconfont icon-gengduo2"></text>
      </view>
      <!-- #endif -->
      <!-- #ifdef APP-PLUS -->
      <view
        v-if="isBack"
        id="home"
        class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back"
        :style="{ top: homeTop + 30 + 'rpx', color: iconColor }"
        @tap="returns"
      >
      </view>
      <view
        v-if="isBack"
        class="nav_title"
        :style="{ top: homeTop + 20 + 'rpx', color: iconColor }"
      >
        {{ navTitle }}
        <slot name="default"></slot>
      </view>
      <!-- #endif -->
    </view>

    <view
      class="dialog_nav"
      :style="'top:' + navH + 'rpx;'"
      v-show="currentPage"
      style="z-index: 99999999"
    >
      <view
        class="dialog_nav_item"
        v-for="(item, index) in selectNavList"
        :key="index"
        @click="linkPage(item.url)"
      >
        <text class="iconfont" :class="item.icon"></text>
        <text class="pl-20">{{ item.name }}</text>
      </view>
    </view>
    <view v-if="isHeight" :style="{ height: `${navH}rpx` }"></view>
    <!-- #endif -->
  </view>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
// let sysHeight = uni.getSystemInfoSync().statusBarHeight;
export default {
  data() {
    return {
      sysHeight: 40,
      homeTop: 20,
      navH: "",
      currentPage: false,
      selectNavList: [
        {
          name: "首页",
          icon: "icon-shouye8",
          url: "/pages/index/index",
        },
        {
          name: "搜索",
          icon: "icon-sousuo6",
          url: "/pages/goods/goods_search/index",
        },
        {
          name: "我的收藏",
          icon: "icon-shoucang3",
          url: "/pages/goods/user_goods_collection/index",
        },
        {
          name: "个人中心",
          icon: "icon-gerenzhongxin1",
          url: "/pages/user/index",
        },
      ],
    };
  },
  props: {
    //是否展示返回按钮
    isBack: {
      type: Boolean,
      default: true,
    },
    navTitle: {
      type: String,
      default: "",
    },
    backgroundColor: {
      type: String,
      default: "transparent",
    },
    //头部背景色是否使用主题色颜色
    isBackgroundColor: {
      type: Boolean,
      default: true,
    },
    // icon、标题颜色
    iconColor: {
      type: String,
      default: "#333333",
    },
    isHeight: {
      type: Boolean,
      default: true,
    },
  },
  created() {
    this.$nextTick(function () {
      // #ifdef MP
      const menuButton = uni.getMenuButtonBoundingClientRect();
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#home")
        .boundingClientRect((data) => {
          if (data)
            this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
        })
        .exec();
      // #endif
      // #ifdef APP-PLUS
      this.homeTop = 200 * 2;
      // #endif
      this.homeTop = 200 * 2;
    });
    this.navH = 160;
    this.$emit("getNavH", this.navH);
  },
  onLoad() {},
  methods: {
    returns: function () {
      uni.navigateBack(-1);
    },
    //返回首页
    goToHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    showNav() {
      this.currentPage = !this.currentPage;
    },
    //下拉导航页面跳转
    linkPage(url) {
      this.$util.navigateTo(url);
      this.currentPage = false;
    },
    touchStart() {
      this.currentPage = false;
    },
  },
};
</script>

<style scoped lang="scss">
/* #ifdef MP || APP-PLUS */
.mp-header {
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  /* #ifdef H5 */
  padding-bottom: 20rpx;
  /* #endif */
}

/* #endif */
.pl-20 {
  padding-left: 20rpx;
}

.cart_nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
}

.navbarCon {
}

.h5_back {
  color: #fff;
  position: fixed;
  left: 20rpx;
  font-size: 32rpx;
  text-align: center;
  line-height: 58rpx;
}

.select_nav {
  width: 170rpx !important;
  height: 60rpx !important;
  border-radius: 33rpx;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  position: fixed;
  font-size: 18px;
  line-height: 58rpx;
  z-index: 1000;
  left: 14rpx;
}

.px-20 {
  padding: 0 20rpx 0;
}

.nav_line {
  content: "";
  display: inline-block;
  width: 1px;
  height: 34rpx;
  background: #fff;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.container_detail {
  /* #ifdef MP */
  margin-top: 32rpx;
  /* #endif */
}

.tab_nav {
  width: 100%;
  height: 48px;
  padding: 0 30rpx 0;
}

.nav_title {
  width: 300rpx;
  color: #fff;
  font-size: 34rpx;
  position: fixed;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
}

.right_select {
  position: fixed;
  right: 20rpx;
  color: #fff;
  text-align: center;
  line-height: 58rpx;
}

.px-20 {
  padding: 0 20rpx 0;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.dialog_nav {
  position: fixed;
  /* #ifdef MP */
  left: 14rpx;
  /* #endif */
  /* #ifdef H5 || APP-PLUS*/
  right: 14rpx;
  /* #endif */
  width: 240rpx;
  background: #ffffff;
  box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.08);
  z-index: 999999 !important;
  border-radius: 14rpx;

  &::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    /* #ifdef MP */
    left: 0;
    right: 0;
    margin: auto;
    /* #endif */
    /* #ifdef H5 || APP-PLUS */
    right: 8px;
    /* #endif */
    top: -9px;
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
    /*transparent 表示透明*/
    border-right: 10px solid transparent;
  }
}

.dialog_nav_item {
  width: 100%;
  height: 84rpx;
  line-height: 84rpx;
  padding: 0 20rpx 0;
  box-sizing: border-box;
  border-bottom: #eee;
  font-size: 28rpx;
  color: #333;
  position: relative;

  .iconfont {
    font-size: 32rpx;
  }

  &::after {
    content: "";
    position: absolute;
    width: 86px;
    height: 1px;
    background-color: #eeeeee;
    bottom: 0;
    right: 0;
  }
}
.return {
  top: 105rpx;
  width: 42rpx;
  height: 32rpx;
}
</style>
